<template>
  <div class="box">
    <div class="top">
      <div class="title">实时游客统计</div>
      <div class="bg"></div>
      <div class="right">
        可预约总量
        <span>999999</span>
        人
      </div>
      <div class="number">
        <span v-for="(item, index) in people" :key="index">{{ item }}</span>
      </div>
      <div class="screen" ref="charts"></div>
    </div>
  </div>
</template>

<script lang="ts"  setup>
import { onMounted, ref } from "vue";
import "echarts-liquidfill";
import * as echarts from "echarts";
import {} from "vue-router";
let people = ref<String>("216908人");
let charts = ref();
onMounted(() => {
  let myCharts = echarts.init(charts.value);
  //设置实例的配置项
  myCharts.setOption({
    //标题组件
    title: {
      //   text: "水球图",
    },
    //x|y轴组件
    xAxis: {},
    yAxis: {},
    //系列:决定你展示什么样的图形图标
    series: [
      // 中间水球
      {
        type: "liquidFill",
        radius: "65%", // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
        center: ["50%", "50%"],
        data: [
          {
            // value: chartData.value * 0.01,
            value: "0.6",
            direction: "left", //波浪方向
          },
          //   {
          //     // value: chartData.value * 0.01,
          //     value: "0.3",
          //     direction: "left", //波浪方向
          //   },
          //   {
          //     // value: chartData.value * 0.01,
          //     value: "0.4",
          //     direction: "left", //波浪方向
          //   },
        ], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: "rgb(10, 68, 122)", // 球体本景色
        },
        amplitude: "6%", //波浪的振幅
        // 修改波浪颜色
        // color: ['#0286ea', 'l#0b99ff'], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                //  color: chartData.colorAll,
                color: "rgb(112, 253, 255)",
              },
              {
                offset: 1,
                //  color: chartData.color,
                color: "rgb(0, 251, 255)",
              },
            ],
            globalCoord: false,
          },
        ],
        label: {
          //  formatter: chartData.value + "%",
          formatter: "预测量",
          rich: {
            d: {
              fontSize: 15,
            },
          },
          fontSize: 18,
          fontweight: 400,
          color: "#fff",
          fontFamily: "fontStyle",
        },
        outline: {
          show: false,
        },
      },
      {
        type: "pie",
        z: 1,
        center: ["50%", "50%"],
        radius: ["72%", "73.5%"], // 控制外圈圆的粗细
        data: [
          {
            name: "",
            value: 500,
            labelLine: {
              show: false,
            },
            itemStyle: {
              //   color: chartData.color,
              color: "rgb(0, 251, 255)",
            },
            emphasis: {
              labelLine: {
                show: false,
              },
              itemStyle: {
                color: "#00AFFF",
              },
            },
          },
        ],
      },

      // 背景圆：带阴影
      {
        type: "pie",
        radius: ["0%", "80%"],
        center: ["50%", "50%"],
        cursor: "auto",
        itemStyle: {
          color: {
            type: "radial",
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [
              {
                offset: 0,
                color: "#04356b",
              },
              {
                offset: 0.92,
                color: "#04356b",
              },
              {
                offset: 1,
                //  color: chartData.colorShadow,
                color: "rgb(0, 251, 255,0.3)",
              },
            ],
          },
        },
        data: [
          // 0.4,
          {
            value: 0.4,
            direction: "left", // 向左飘动
          },
        ],
        labelLine: {
          show: false,
        },
        z: -1,
      },
    ],
    //布局组件
    grid: {
      left: 0,
      right: 0,
      top: -30,
      bottom: 0,
    },
  });
});
</script>

<style lang="scss" scoped>
.box {
  //   width: 100%;
  //   height: 100%;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;

  .top {
    // margin-left: 20px;

    .title {
      color: white;
      font-size: 20px;
      border: 1px solid transparent;
    }

    .bg {
      width: 68px;
      height: 7px;
      background: url(../../images/dataScreen-title.png) no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }

    .right {
      float: right;
      color: white;
      font-size: 20px;
      margin-right: 30px;

      span {
        color: #f58401;
      }
    }
  }
  .number {
    padding: 10px;
    margin-top: 30px;
    display: flex;

    span {
      flex: 1;
      height: 40px;
      text-align: center;
      line-height: 40px;
      background: url(../../images/total.png) no-repeat;
      background-size: 100% 100%;
      color: #29fcff;
    }
  }
  .screen {
    width: 100%;
    height: 240px;
  }
}
</style>